import { useState, memo, useMemo } from "react";
// 1. 传递简单类型的prop   prop变化时缓存组件重新渲染
// 2. 传递的数据为引用类型  比较的是新值与就旧值的引用是否相同(当父组件重新渲染时,数据会形成新的引用)
// 3. 保证引用稳定(组件重新渲染，数据引用不发生变化) -> useMemo(组件渲染过程中缓存一个值)
const MemoSon = memo(function Son({ count, list }) {
  console.log("我是子组件，我重新渲染了");
  return <>this is son {list}</>;
});

function App() {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(100);
  const list = [1, 2, 3];
  const MemoList = useMemo(() => list, []); // 只在组件渲染完毕后执行一次
  return (
    <>
      <button onClick={() => setCount(count + 1)}>+</button>
      {/* 缓存组件重新渲染 */}
      {/* <MemoSon count={count} /> */}
      {/* 缓存组件不重新渲染 */}
      <MemoSon count={number} />

      {/* 父组件重新渲染 组件内的代码会重新执行list会得到一个新的引用，缓存组件会重新渲染 */}
      <MemoSon list={MemoList} />
    </>
  );
}

export default App;
